<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>jzhmcoo1</title><meta name="author" content="lixing"><meta name="copyright" content="lixing"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="👨🏻‍💻 好好学习，天天敲代码 👩🏻‍💻">
<meta property="og:type" content="website">
<meta property="og:title" content="jzhmcoo1">
<meta property="og:url" content="https://www.lihangzhu.com/page/2/index.html">
<meta property="og:site_name" content="jzhmcoo1">
<meta property="og:description" content="👨🏻‍💻 好好学习，天天敲代码 👩🏻‍💻">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg">
<meta property="article:author" content="lixing">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg"><link rel="shortcut icon" href="/images/favicon.png"><link rel="canonical" href="https://www.lihangzhu.com/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="pcqGakY4hww-Mg9iGN4mQw6v_y_IRvYmM1l50SAcPpg"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2021-08-01 21:30:02'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
          const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches
          const isNotSpecified = window.matchMedia('(prefers-color-scheme: no-preference)').matches
          const hasNoSupport = !isDarkMode && !isLightMode && !isNotSpecified

          if (t === undefined) {
            if (isLightMode) activateLightMode()
            else if (isDarkMode) activateDarkMode()
            else if (isNotSpecified || hasNoSupport) {
              const now = new Date()
              const hour = now.getHours()
              const isNight = hour <= 6 || hour >= 18
              isNight ? activateDarkMode() : activateLightMode()
            }
            window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
              if (saveToLocal.get('theme') === undefined) {
                e.matches ? activateDarkMode() : activateLightMode()
              }
            })
          } else if (t === 'light') activateLightMode()
          else activateDarkMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    })(window)</script><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="jzhmcoo1" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">jzhmcoo1</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 时间轴</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/message/"><i class="fa-fw fa fa-coffee"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-user-friends"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于我</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">jzhmcoo1</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/jzhmcoo1" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:jzhmzlxocoo1@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/10/14/Computer-Network-Physical-Layer-Communication/" title="物理层——通信基础">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/internet.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="物理层——通信基础"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/10/14/Computer-Network-Physical-Layer-Communication/" title="物理层——通信基础">物理层——通信基础</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-10-14T14:32:11.000Z" title="发表于 2020-10-14 22:32:11">2020-10-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">
物理层考虑的是怎样才能连接各台计算机的传输媒体上传输数据的比特流，而不是连接计算机的具体物理设备或具体传输媒体。

基本概念数据、信号、码元数据是指传松信息的实体。
信号是指数据的电气或电磁表现，是数据在传输过程中的存在形式。
数据和信号都可以用模拟或数字来修饰
模拟数据（信号）是连续变化的数据（或信号）
数字数据（信号）是取值仅允许为有限个的几个离散数值的数据（或信号）
数据传输方式
串行传输：一个一个比特按照时间顺序传输（经济考虑，远距离传输通常采用串行传输）
并行传输：多个比特通过多条信道同时传输

码元指一个固定时长的信号波形（数字脉冲）表示一个$k$进制数字，代表不同离散数值的基本波形，是数字通信中数字信号的计量单位，这个时长内的信号称为**$k$进制码元**，该时长称为 码元宽度。
1个码元可以携带多个比特的信息量。例如使用二进制编码时，只有两种不同的码元：0、1
信源、信道、信宿信源是产生和发送数据的源头。
信宿是接受数据的终点。
发送端信源发送的信息需要通过 变换器转换成适合于在信道上传输的信号，而通过信道传输到接收端的信号先由 反变换器 转换成原始信息，再发给信宿。 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/10/06/Computer-Network-OSI-TCP/" title="ISO/OSI参考模型和TCP/IP模型">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/internet.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="ISO/OSI参考模型和TCP/IP模型"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/10/06/Computer-Network-OSI-TCP/" title="ISO/OSI参考模型和TCP/IP模型">ISO/OSI参考模型和TCP/IP模型</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-10-06T07:28:01.000Z" title="发表于 2020-10-06 15:28:01">2020-10-06</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">OSI参考模型全称为：开发系统互连参考模型（OSI/RM)
简称为：OSI参考模型
自下而上依次分别为：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。

低三层统称为：通信子网，它是为了联网而附近的通信设备，完成数据的传输功能；

高三层统称为：资源子网，它相当于计算机系统，完成数据的处理等功能。

传输层承上启下。


物理层（Physical Layer）传输单位是比特，任务是透明的传输比特流，功能是在物理媒体上为数据端设备透明地传输原始比特流。
物理层接口标准很多，如果EIA-232C、EIA/TIA RS-449、CCITT的X.21
物理层规定了电路接口的一些参数，如机械形状和尺寸、交换电路的数量和排列等。例如笔记本电脑上的网线接口。
物理层也规定了通信链路上传输的信号的意义和电气特征。
数据链路层（Data Link Layer）传输单位是帧，任务是将网络层传来的IP数据报组装成帧。数据链路层功能可以概括为：成帧、差错控制、流量控制、传输管理。

差错控制：由于外界噪声的干扰，原始的物理连接在传输比特流时发生错误。如果两个结点之间规定了数据链路层协议，就可以检 ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/10/06/Computer-Network-Architecture/" title="计算机网络体系结构">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/internet.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="计算机网络体系结构"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/10/06/Computer-Network-Architecture/" title="计算机网络体系结构">计算机网络体系结构</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-10-06T06:10:52.000Z" title="发表于 2020-10-06 14:10:52">2020-10-06</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">计算机网络分层结构把 计算机网络的各层及其协议的集合称为网络的 体系结构（Architecture）
它是计算机网络中的层次、各层的协议、及层间接口的集合。
分层的基本原则计算机网络体系结构具有可分层的特性，分层的基本原则为：

每层都实现一种相对独立的功能，降低大系统的复杂度；
各层直接的界面自然清晰，易于理解，相互交流尽可能少；
各层功能的精确定义独立于具体实现的方法，可以采用最合适的技术来实现；
保持下层对上层的独立性，上层单向使用下层提供的服务。
整个分层结构应该能促进标准化工作。

分层名称在计算机网络的分层结构中，第n层中的活动元素通常称为n层实体。实体指任何可发送或接受信息的硬件或软件进程。
不同机器上的同一层称为对等层
同一层的实体称为 对等实体
n层实体实现的服务为n+1层使用，在这种情况下，n层被称为 服务提供者，n+1层则服务于用户。
传输数据单位每一层自己传送的数据单位，其名称、大小、含义也各有不同。
在计算机网络体系结构的各个层次中，每个报文都分为两个部分：
数据部分SDU：为完成用户所要求的功能而应传送的数据。
控制信息部分PCI：控制协议操作的信息。
它们 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/09/22/hexo-ssh-deploy/" title="hexo博客部署踩坑记录">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/post.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="hexo博客部署踩坑记录"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/09/22/hexo-ssh-deploy/" title="hexo博客部署踩坑记录">hexo博客部署踩坑记录</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-09-22T03:51:00.000Z" title="发表于 2020-09-22 11:51:00">2020-09-22</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/">踩坑记录</a></span></div><div class="content">每次在使用hexo d
进行部署的时候，总是显示权限不够报错

网上一查好像是说sshkey的时间过期了（MacOS)环境
使用如下命令即可解决：
sh-3.2# ssh-add /Users/lixing/.ssh/id_rsaEnter passphrase for /Users/lixing/.ssh/id_rsa: Identity added: /Users/lixing/.ssh/id_rsa (lixing@zhulixingdeMacBook-Pro.local)

</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/08/25/JavaScript-Prototypelink/" title="JavaScript学习笔记——面向对象[原型链继承]">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/javascriptlogo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript学习笔记——面向对象[原型链继承]"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/25/JavaScript-Prototypelink/" title="JavaScript学习笔记——面向对象[原型链继承]">JavaScript学习笔记——面向对象[原型链继承]</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-08-25T04:21:17.000Z" title="发表于 2020-08-25 12:21:17">2020-08-25</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">
许多OO语言都支持两种继承方式：接口继承和实现继承。
接口继承只继承方法签名，而实现继承则继承实际的方法。
ECMAScript只支持实现继承，主要靠原型链。

原型链简单回顾构造函数、原型、实例的关系：

每个构造函数都有一个原型对象prototype；
原型对象包含一个指向构造函数的指针constructor；
实例包含一个指向原型对象的内部指针__proto__；


现在，我们使原型对象等于另一个类型的实例。此时，原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条。这就是原型链的基本概念。

实现原型链的基本模式function SuperType() &#123;    this.property = true;&#125;SuperType.prototype.getSuperValue = function () &#123;    return this.property;&#125;;function SubType() & ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/08/16/JavaScript-closure/" title="JavaScript学习笔记——函数表达式[闭包]">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/javascriptlogo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript学习笔记——函数表达式[闭包]"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/16/JavaScript-closure/" title="JavaScript学习笔记——函数表达式[闭包]">JavaScript学习笔记——函数表达式[闭包]</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-08-16T05:56:43.000Z" title="发表于 2020-08-16 13:56:43">2020-08-16</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">
闭包是指有权访问另一个函数作用域中的变量的函数。

创建闭包的常见方式，是在一个函数内部创建另一个函数
function createComparisonFunction(propertyName) &#123;    return function (object1, object2) &#123;        var value1 = object1[propertyName];        var value2 = object2[propertyName];        if (value1 &lt; value2) &#123;            return -1;        &#125; else if (value1 &gt; value2) &#123;            return 1;        &#125; else &#123;            return 0;        &#125;    &#125;;&#125;

在这个例子中，3、4行代码时内部函数（一个匿名函数）中的代码，这两行代码访问了外部函数中的变量prop ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/08/13/CSS-Box-Model-II/" title="CSS盒子模型II">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS盒子模型II"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/13/CSS-Box-Model-II/" title="CSS盒子模型II">CSS盒子模型II</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-08-13T08:04:45.000Z" title="发表于 2020-08-13 16:04:45">2020-08-13</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/StudyNotes/FrontEnd/">FrontEnd</a></span></div><div class="content">外边距、内边距、边框外边距外边距是盒子周围一圈看不到的空间，它会把其他元素从盒子旁边推开。
其值可正可负，设置负值会导致与其他内容重叠。
无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
外边距折叠有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。
例如有两个&lt;p&gt;元素，他们上下相接
&lt;div class=&quot;container&quot;&gt;  &lt;p class=&quot;one&quot;&gt;I am paragraph one.&lt;/p&gt;  &lt;p class=&quot;two&quot;&gt;I am paragraph two.&lt;/p&gt;&lt;/div&gt;

设置其CSS属性为：
.one &#123;  margin-bottom: 50px;&#125;.two &#123;  margin-top: 0;&#125;    

随意修改.two中的margin-top属性为$≤50px$的值，会发现他们之间的间距不变。
边框边框是在边距和填充框之间 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/08/13/CSS-Number-Length-Percentage/" title="CSS-值与单位">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="CSS-值与单位"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/08/13/CSS-Number-Length-Percentage/" title="CSS-值与单位">CSS-值与单位</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-08-13T08:04:45.000Z" title="发表于 2020-08-13 16:04:45">2020-08-13</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a><i class="fas fa-angle-right"></i><a class="article-meta__categories" href="/categories/StudyNotes/FrontEnd/">FrontEnd</a></span></div><div class="content">数字、长度、百分比数值类以下全部归类为数值类：



数值类型
描述



&lt;integer&gt;
一个整数，比如1024，-55


&lt;number&gt;
表示一个小数——可能有小数点后面的部分，也可能没有，例如0.255、128、-1.2


&lt;dimension&gt;
是一个带附加单位的小数，例如45deg、5s、10px。&lt;dimension&gt;是一个伞形类别，包括&lt;length&gt;、&lt;angle&gt;、&lt;time&gt;和&lt;resolution&gt;类型。


&lt;percentage&gt;
表示一些其他值的一部分，例如50%。百分比值总是相对于另一个量，例如，一个元素的长度相对于其父元素的长度。


长度最常见的数字类型是&lt;length&gt;，例如10px(像素)或30em。CSS中有两种类型的长度——相对长度和绝对长度。
绝对长度单位它们与其他任何东西都没有关系，通常被认为总是相同的大小。



单位
名称
等价换算



cm
厘米
1cm = 96px/2.54


mm
毫米
1mm = ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/07/22/JavaScipt-OOP/" title="JavaScript学习笔记——面向对象[创建对象]">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/javascriptlogo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript学习笔记——面向对象[创建对象]"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/22/JavaScipt-OOP/" title="JavaScript学习笔记——面向对象[创建对象]">JavaScript学习笔记——面向对象[创建对象]</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-07-22T07:35:44.000Z" title="发表于 2020-07-22 15:35:44">2020-07-22</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">使用工厂模式创建对象
工厂模式时软件工程领域的一种广为人知的设计模式，这种模式抽象了创建具体对象的过程。
开发人员用函数来封装以特定接口创建对象的细节。

function createPerson(name, age, job) &#123;    var o = new Object();    o.name = name;    o.age = age;    o.job = job;    o.sayName = function () &#123;        console.log(this.name);    &#125;    return o;&#125;var person1 = createPerson(&quot;Nicholas&quot;, 29, &quot;Software Engineer&quot;);var person2 = createPerson(&quot;Greg&quot;, 27, &quot;Doctor&quot;);

工厂模式所带来的问题工厂模式虽然解决了创建多个相似对象的问题，但却没有解决 对象识别 的问题（即怎么样知道一 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/07/21/JavaScript-RegExp/" title="JavaScript学习笔记——正则表达式">     <img class="post_bg" data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/javascriptlogo.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JavaScript学习笔记——正则表达式"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/07/21/JavaScript-RegExp/" title="JavaScript学习笔记——正则表达式">JavaScript学习笔记——正则表达式</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-07-21T08:27:34.000Z" title="发表于 2020-07-21 16:27:34">2020-07-21</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/StudyNotes/">StudyNotes</a></span></div><div class="content">正则表达式的功能
用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，获取字符串中符合规则的内容提取出来。


创建正则表达式使用字面量形式定义正则表达式语法//语法: var expression = /pattern/flags

其中，模式部分(pattern)可以是任意简单或复杂的正则表达式，标志(flag)表明正则表达式的行为。
flag的值可以为：

g，全局模式(global)，即模式将被应用于所有字符串，而并非在匹配到第一个字符串时就停止匹配
i，不区分大小写模式(case-insensitive)，即在匹配时忽略大小写
m，多行模式(multiline)，即在到达一行文本末尾时还会继续查找下一行中是否存在与模式匹配的项

如：
/* * 匹配字符串中所有&quot;at&quot; */var pattern1 = /at/g;/** * 匹配第一个&quot;bat&quot;或&quot;cat&quot;,不区分大小写 */var pattern2 = /[bc]at/i;

字面量形式下的元字符转义元字符包括(),[],&#123; ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><span class="page-number current">2</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/3/"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/avatar.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">lixing</div><div class="author-info__description">👨🏻‍💻 好好学习，天天敲代码 👩🏻‍💻</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">36</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">37</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">9</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/jzhmcoo1"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/jzhmcoo1" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:jzhmzlxocoo1@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">真正的大师,永远都怀着一颗学徒的心</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210801204426-browser.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="跨域问题"/></a><div class="content"><a class="title" href="/2021/08/01/%E8%B7%A8%E5%9F%9F/" title="跨域问题">跨域问题</a><time datetime="2021-08-01T12:42:27.000Z" title="发表于 2021-08-01 20:42:27">2021-08-01</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念"><img data-lazy-src="https://gitee.com/jzhmcoo1/jzhmcoo1picrepo/raw/master/img/css.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="css关键概念"/></a><div class="content"><a class="title" href="/2021/06/26/Css-Core-Concepts/" title="css关键概念">css关键概念</a><time datetime="2021-06-26T02:53:41.000Z" title="发表于 2021-06-26 10:53:41">2021-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210621082947.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="C++OJ环境搭建"/></a><div class="content"><a class="title" href="/2021/06/21/Cpp-OJ-Environment/" title="C++OJ环境搭建">C++OJ环境搭建</a><time datetime="2021-06-21T00:28:12.000Z" title="发表于 2021-06-21 08:28:12">2021-06-21</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210620222035.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="浏览器的强缓存和协商缓存"/></a><div class="content"><a class="title" href="/2021/06/20/Browser-Cache/" title="浏览器的强缓存和协商缓存">浏览器的强缓存和协商缓存</a><time datetime="2021-06-20T14:18:05.000Z" title="发表于 2021-06-20 22:18:05">2021-06-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/06/17/Sorting/" title="排序算法汇总"><img data-lazy-src="https://jzhmcoo1-1258918430.cos.ap-shanghai.myqcloud.com/markdown/20210617235208-sorting.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="排序算法汇总"/></a><div class="content"><a class="title" href="/2021/06/17/Sorting/" title="排序算法汇总">排序算法汇总</a><time datetime="2021-06-17T15:53:46.000Z" title="发表于 2021-06-17 23:53:46">2021-06-17</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/DevNotes/"><span class="card-category-list-name">DevNotes</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Leetcode/"><span class="card-category-list-name">Leetcode</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/StudyNotes/"><span class="card-category-list-name">StudyNotes</span><span class="card-category-list-count">31</span></a><ul class="card-category-list child"><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/StudyNotes/BuildDevEnv/"><span class="card-category-list-name">BuildDevEnv</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/StudyNotes/FrontEnd/"><span class="card-category-list-name">FrontEnd</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/StudyNotes/Syntax/"><span class="card-category-list-name">Syntax</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/StudyNotes/WebDevelopment/"><span class="card-category-list-name">WebDevelopment</span><span class="card-category-list-count">2</span></a></li></ul></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/%E8%B8%A9%E5%9D%91%E8%AE%B0%E5%BD%95/"><span class="card-category-list-name">踩坑记录</span><span class="card-category-list-count">1</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/408/" style="font-size: 1.3em; color: #99a1ac">408</a> <a href="/tags/BoxModel/" style="font-size: 1.1em; color: #999">BoxModel</a> <a href="/tags/C/" style="font-size: 1.1em; color: #999">C++</a> <a href="/tags/CSS/" style="font-size: 1.3em; color: #99a1ac">CSS</a> <a href="/tags/CSS-selectors/" style="font-size: 1.1em; color: #999">CSS selectors</a> <a href="/tags/Document-structure/" style="font-size: 1.1em; color: #999">Document structure</a> <a href="/tags/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/tags/HTTP/" style="font-size: 1.1em; color: #999">HTTP</a> <a href="/tags/HTTPS/" style="font-size: 1.1em; color: #999">HTTPS</a> <a href="/tags/Hash%E8%A1%A8/" style="font-size: 1.1em; color: #999">Hash表</a> <a href="/tags/JavaScript/" style="font-size: 1.4em; color: #99a5b6">JavaScript</a> <a href="/tags/Linux/" style="font-size: 1.5em; color: #99a9bf">Linux</a> <a href="/tags/OJ/" style="font-size: 1.1em; color: #999">OJ</a> <a href="/tags/RuoYi/" style="font-size: 1.1em; color: #999">RuoYi</a> <a href="/tags/SSL/" style="font-size: 1.1em; color: #999">SSL</a> <a href="/tags/Web/" style="font-size: 1.2em; color: #999da3">Web</a> <a href="/tags/css/" style="font-size: 1.1em; color: #999">css</a> <a href="/tags/flask/" style="font-size: 1.1em; color: #999">flask</a> <a href="/tags/hexo/" style="font-size: 1.1em; color: #999">hexo</a> <a href="/tags/markdown/" style="font-size: 1.1em; color: #999">markdown</a> <a href="/tags/python/" style="font-size: 1.1em; color: #999">python</a> <a href="/tags/ssh/" style="font-size: 1.1em; color: #999">ssh</a> <a href="/tags/syntax/" style="font-size: 1.1em; color: #999">syntax</a> <a href="/tags/webpack/" style="font-size: 1.2em; color: #999da3">webpack</a> <a href="/tags/%E5%89%8D%E7%AB%AF/" style="font-size: 1.4em; color: #99a5b6">前端</a> <a href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/" style="font-size: 1.1em; color: #999">前端面试</a> <a href="/tags/%E5%B7%A5%E5%85%B7%E5%88%86%E4%BA%AB/" style="font-size: 1.1em; color: #999">工具分享</a> <a href="/tags/%E6%8E%92%E5%BA%8F/" style="font-size: 1.1em; color: #999">排序</a> <a href="/tags/%E6%95%A3%E5%88%97%E8%A1%A8/" style="font-size: 1.1em; color: #999">散列表</a> <a href="/tags/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/" style="font-size: 1.4em; color: #99a5b6">数据结构</a> <a href="/tags/%E6%95%B0%E7%BB%84/" style="font-size: 1.2em; color: #999da3">数组</a> <a href="/tags/%E6%9F%A5%E6%89%BE/" style="font-size: 1.1em; color: #999">查找</a> <a href="/tags/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98/" style="font-size: 1.1em; color: #999">浏览器缓存</a> <a href="/tags/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/" style="font-size: 1.1em; color: #999">网络协议</a> <a href="/tags/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/" style="font-size: 1.3em; color: #99a1ac">计算机网络</a> <a href="/tags/%E8%B7%A8%E5%9F%9F/" style="font-size: 1.1em; color: #999">跨域</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 1.1em; color: #999">随笔</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/archives/" title="查看更多">
    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/08/"><span class="card-archive-list-date">八月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/02/"><span class="card-archive-list-date">二月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/11/"><span class="card-archive-list-date">十一月 2020</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/10/"><span class="card-archive-list-date">十月 2020</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/09/"><span class="card-archive-list-date">九月 2020</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/08/"><span class="card-archive-list-date">八月 2020</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/07/"><span class="card-archive-list-date">七月 2020</span><span class="card-archive-list-count">9</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">36</div></div><div class="webinfo-item"><div class="item-name">已运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2020-03-07T16:00:00.000Z"></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">71.2k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2021-08-01T13:30:02.035Z"></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2021 By lixing</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><a target="_blank" rel="noopener" href="http://www.beian.miit.gov.cn/"><img class="icp-icon" src="/images/icp.png"><span>备案号：沪ICP备20019376号-1</span></a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"><script>function subtitleType () {
  getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {
    jinrishici.load(function (result) {
      if (true) {
        var sub = "Stay hungry，Stay foolish,求知若饥，虚怀若愚".length == 0 ? new Array() : "Stay hungry，Stay foolish,求知若饥，虚怀若愚".split(',')
        var content = result.data.content
        var both = sub.unshift(content)
        var typed = new Typed('#subtitle', {
          strings: sub,
          startDelay: 300,
          typeSpeed: 150,
          loop: true,
          backSpeed: 50,
        })
      } else {
        document.getElementById('subtitle').innerHTML = result.data.content
      }
    })
  })
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}
</script></div><script defer="defer" id="ribbon" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js" size="150" alpha="0.6" zIndex="-1" mobile="false" data-click="false"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>